<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖函数</title>
</head>
<style>
</style>
<body>
    
    <div class="throttle">
        <input type="text" class="input">
        <input type="button" value="取消">
    </div>
    <script>


        /*
            let trigger = delay - (Date.now() - startTime)  
                if(trigger <= 0){
                    触发
                    startTime = 触发时候的时间
                } else{
                    不触发
                }

        */

        // 节流函数
        var throttle = (fn, delay) => {
            let startTime = 0
            let _throttle = function(event){
                let nowTime = Date.now()
                let trigger = delay - (nowTime - startTime)  
                if(trigger <= 0){
                    fn.call(this,event)
                    startTime = nowTime
                }
            }
            return _throttle
        }

        let count = 0
        let input = document.querySelector('input');

        input.oninput = throttle(function(event) {
           count ++
           console.log('我是第' + count + '次',this.value,event);
        },2000)

    </script>

</body>
</html>